<!--
  *@Description : 商店附近的专题组件
  *@author 萧红
  *@date 2020-03-22 17:01
  *@LastEditTime 2020-03-22 17:01
  *@LastEdititors
-->
<template>
  <div class="zhuanti-mode">
    <!--大图-->
    <div class="datu">
      <img :src="imgData.datu" alt="">
    </div>
    <!--四张小图-->
    <div class="imgArea">
      <cube-scroll ref="scroll" :data="[1,2,3,4]" direction="horizontal" nest-mode="native" class="horizontor">
        <div class="list-wrapper">
          <div class="list-item" v-for="(product,index) in imgData.product" :key="index">
            <div class="product-img" @click="toNewPage({path:'/shopDetail', query:{pid:product.pid}})">
              <img :src="product.url" alt="">
            </div>
            <div class="price">￥{{product.price}}</div>
          </div>
        </div>
      </cube-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhuanTi',
  props: {
    imgData: {
      type: Object,
      default: () => {
        return {
          datu: '../../static/icon-zhuanti/1.png',
          product: [
            {
              url: '../../static/icon-zhuanti/12.jpg',
              pid: '1',
              price: '135'
            },
            {
              url: '../../static/icon-zhuanti/13.jpg',
              pid: '1',
              price: '136'
            },
            {
              url: '../../static/icon-zhuanti/14.jpg',
              pid: '1',
              price: '140'
            },
            {
              url: '../../static/icon-zhuanti/15.jpg',
              pid: '1',
              price: '158'
            },
            {
              url: '../../static/icon-zhuanti/16.jpg',
              pid: '1',
              price: '199'
            },
            {
              url: '../../static/icon-zhuanti/17.jpg',
              pid: '1',
              price: '200'
            },
            {
              url: '../../static/icon-zhuanti/18.jpg',
              pid: '1',
              price: '205'
            },
            {
              url: '../../static/icon-zhuanti/19.jpg',
              pid: '1',
              price: '255'
            },
            {
              url: '../../static/icon-zhuanti/20.jpg',
              pid: '1',
              price: '199'
            }
          ]}
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../node_modules/stylus-px2rem"
  .zhuanti-mode
  {
    img
    {
      width 100%
      height: 100%
    }
    margin: 2px 0px
    padding 0px 3px
    .datu
    {
      height 40px
      margin 2px 2.4px
    }
    .imgArea
    {
      width 100%;
      .cube-scroll-wrapper.horizontor
      {
        .cube-scroll-content
        {
          width 1000px!important;
          display: inline-block
        }
        .list-wrapper
        {
          line-height: 60px
          white-space: nowrap
          clear both
        }
        .list-item
        {
          float left
          width 34.5px
          margin 0px 2px
          .product-img
          {
            width 100%
            height 35px
          }
          .price
          {
            color: deeppink
            line-height 15px
          }
        }
      }
    }
  }
</style>
